<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生主页面</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles_student.css">
</head>
<body>
    <div class="navbar">
        <a href = "https://www.nuit.edu.cn">
        <img src ="https://www.nuit.edu.cn/content/main/base/img/logo.png" alt="LOGO"> 
        </a>
        
        <div class="user-info">
            <span id="username">何樊</span>
            <p id="studentId">23215220330</p>
            <button id="logout-btn">退出登录</button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#"><i class="fas fa-tachometer-alt"></i>仪表盘</a></li>
                <li><a href="#"><i class="fas fa-flask"></i>实验查看</a></li>
                <li><a href="#" id="upload-link"><i class="fas fa-file-upload"></i>作业提交</a></li>
                <li><a href="video_player.html"><i class="fa-brands fa-youtube"></i>教学视频播放</a></li>
                <li><a href="#"><i class="fas fa-chart-line"></i>成绩查询</a></li>
                <li><a href="#"><i class="fas fa-bell"></i>通知公告</a></li>
                <li><a href="#"><i class="fas fa-question-circle"></i>帮助与反馈</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard">
                <div class="card">
                    <h3>个人信息</h3>
                    <p>姓名：<span id="displayName">张三</span></p>
                    <p>班级：<span id="classInfo">班级1</span></p>
                    <p>学号：<span id="studentIdInfo">20230001</span></p>
                </div>
                <div class="card">
                    <h3>快捷操作</h3>
                    <button>查看实验</button>
                    <button id="upload-btn">提交作业</button>
                    <button>查看成绩</button>
                </div>
                <div class="card">
                    <h3>系统状态</h3>
                    <p>未读通知：1条</p>
                    <p>待提交作业：2份</p>
                </div>
            </div>
            <h3>实验任务列表</h3>
            <table class="experiment-table">
                <thead>
                    <tr><th>实验编号</th><th>实验名称</th><th>截止时间</th><th>提交状态</th><th>成绩</th><th>操作</th></tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="exp1.html">实验1</a></td> 
                        <td>数据表示与运算实验</td>
                        <td>2023-10-15</td>
                        <td>已提交</td>
                        <td>85</td>
                        <td><button class="action-button">查看详情</button></td>
                    </tr>
                    <tr>
                        <td>实验2</td>
                        <td>BombLab实验</td>
                        <td>2023-10-22</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp2">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验3</td>
                        <td>AttackLab实验</td>
                        <td>2023-10-29</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp3">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验4</td>
                        <td>LinkLab实验</td>
                        <td>2023-11-05</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp4">提交作业</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="floating-btn" id="floating-upload-btn"><i class="fas fa-cloud-upload-alt"></i></div>

    <div class="upload-container" id="upload-container">
        <div class="upload-box" id="upload-box">
            <div class="upload-header">
                <h2>上传作业文件</h2>
            </div>
            <button class="close-btn" id="close-upload"><i class="fas fa-times"></i></button>
            <div class="preview-container" id="preview-container">
                <div class="preview-placeholder">将文件拖拽到此处或点击"选择文件"</div>
                <img id="image-preview" alt="图片预览">
                <video id="video-preview" controls></video>
            </div>
            <input type="file" id="file-input" class="file-input" accept="image/*,video/*">
            <div class="upload-buttons">
                <button class="select-file-btn" id="select-file-btn">选择文件</button>
                <button class="upload-btn" id="upload-file-btn">上传文件</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <script>
        $(function() {
            // 退出登录
            $('#logout-btn').on('click', function() {
                // 清除cookie
                document.cookie = 'authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                document.cookie = 'savedUser=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                window.location.href = 'login.html';
            });
        });
    </script>

//文件上传模块
    <script>
        const MAX_SIZE = 2 * 1024 * 1024 * 1024; // 2GB

$('#select-file-btn').on('click', () => $('#file-input').click());
$('#file-input').on('change', updatePreview);
$('#upload-file-btn').on('click', uploadFile);

function updatePreview() {
  const file = this.files[0];
  if (!file) return;
  if (file.size > MAX_SIZE) {
    alert('文件超过 2 GB！');
    return;
  }
  $('#preview-container').show();
  const url = URL.createObjectURL(file);
  if (file.type.startsWith('image/')) {
    $('#image-preview').attr('src', url).show();
    $('#video-preview').hide();
  } else if (file.type.startsWith('video/')) {
    $('#video-preview').attr('src', url).show();
    $('#image-preview').hide();
  } else {
    $('#image-preview, #video-preview').hide();
  }
}

function uploadFile() {
  const file = $('#file-input')[0].files[0];
  if (!file) { alert('请选择文件！'); return; }

  const fd = new FormData();
  fd.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/upload', true);

  xhr.upload.onprogress = e => {
    const percent = Math.round(e.loaded / e.total * 100);
    $('#upload-btn').text(`上传中… ${percent}%`);
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      alert('上传成功!');
    } else {
      alert('上传失败');
    }
    $('#upload-btn').text('上传文件');
  };

  xhr.send(fd);
}

    </Script>



</body>
</html> -->





<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生主页面</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles_student.css">
    <style>
        /* 新增进度条样式 */
        .progress-container {
            width: 100%;
            background-color: #f3f3f3;
            border-radius: 4px;
            margin: 15px 0;
            display: none;
        }
        
        .progress-bar {
            height: 20px;
            background-color: #4caf50;
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s;
        }
        
        .progress-text {
            text-align: center;
            font-size: 12px;
            color: #555;
            margin-top: 5px;
        }
        
        .upload-status {
            margin-top: 10px;
            text-align: center;
            font-size: 14px;
            color: #333;
            display: none;
        }
    </style>
</head>

<body>
    <!-- 其他部分保持不变 -->

     <div class="navbar">
        <a href = "https://www.nuit.edu.cn">
        <img src ="https://www.nuit.edu.cn/content/main/base/img/logo.png" alt="LOGO"> 
        </a>
        
        <div class="user-info">
            <span id="username">何樊</span>
            <p id="studentId">23215220330</p>
            <button id="logout-btn">退出登录</button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#"><i class="fas fa-tachometer-alt"></i>仪表盘</a></li>
                <li><a href="#"><i class="fas fa-flask"></i>实验查看</a></li>
                <li><a href="#" id="upload-link"><i class="fas fa-file-upload"></i>作业提交</a></li>
                <li><a href="video_player.html"><i class="fa-brands fa-youtube"></i>教学视频播放</a></li>
                <li><a href="#"><i class="fas fa-chart-line"></i>成绩查询</a></li>
                <li><a href="#"><i class="fas fa-bell"></i>通知公告</a></li>
                <li><a href="#"><i class="fas fa-question-circle"></i>帮助与反馈</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard">
                <div class="card">
                    <h3>个人信息</h3>
                    <p>姓名：<span id="displayName">张三</span></p>
                    <p>班级：<span id="classInfo">班级1</span></p>
                    <p>学号：<span id="studentIdInfo">20230001</span></p>
                </div>
                <div class="card">
                    <h3>快捷操作</h3>
                    <button>查看实验</button>
                    <button id="upload-btn">提交作业</button>
                    <button>查看成绩</button>
                </div>
                <div class="card">
                    <h3>系统状态</h3>
                    <p>未读通知：1条</p>
                    <p>待提交作业：2份</p>
                </div>
            </div>
            <h3>实验任务列表</h3>
            <table class="experiment-table">
                <thead>
                    <tr><th>实验编号</th><th>实验名称</th><th>截止时间</th><th>提交状态</th><th>成绩</th><th>操作</th></tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="exp1.html">实验1</a></td> 
                        <td>数据表示与运算实验</td>
                        <td>2023-10-15</td>
                        <td>已提交</td>
                        <td>85</td>
                        <td><button class="action-button">查看详情</button></td>
                    </tr>
                    <tr>
                        <td>实验2</td>
                        <td>BombLab实验</td>
                        <td>2023-10-22</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp2">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验3</td>
                        <td>AttackLab实验</td>
                        <td>2023-10-29</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp3">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验4</td>
                        <td>LinkLab实验</td>
                        <td>2023-11-05</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp4">提交作业</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="floating-btn" id="floating-upload-btn"><i class="fas fa-cloud-upload-alt"></i></div>

    <div class="upload-container" id="upload-container">
        <div class="upload-box" id="upload-box">
            <div class="upload-header">
                <h2>上传作业文件</h2>
            </div>
            <button class="close-btn" id="close-upload"><i class="fas fa-times"></i></button>
            <div class="preview-container" id="preview-container">
                <div class="preview-placeholder">将文件拖拽到此处或点击"选择文件"</div>
                <img id="image-preview" alt="图片预览">
                <video id="video-preview" controls></video>
            </div>
            <input type="file" id="file-input" class="file-input" accept="image/*,video/*">
            <div class="upload-buttons">
                <button class="select-file-btn" id="select-file-btn">选择文件</button>
                <button class="upload-btn" id="upload-file-btn">上传文件</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
    
    <div class="upload-container" id="upload-container">
        <div class="upload-box" id="upload-box">
            <div class="upload-header">
                <h2>上传作业文件</h2>
            </div>
            <button class="close-btn" id="close-upload"><i class="fas fa-times"></i></button>
            <div class="preview-container" id="preview-container">
                <div class="preview-placeholder">将文件拖拽到此处或点击"选择文件"</div>
                <img id="image-preview" alt="图片预览">
                <video id="video-preview" controls></video>
            </div>
            <input type="file" id="file-input" class="file-input">
            
            <!-- 新增文件信息和进度条 -->
            <div id="file-info" style="margin: 10px 0; display: none;">
                <div><strong>文件名:</strong> <span id="file-name"></span></div>
                <div><strong>大小:</strong> <span id="file-size"></span></div>
                <div><strong>类型:</strong> <span id="file-type"></span></div>
            </div>
            
            <div class="progress-container" id="progress-container">
                <div class="progress-bar" id="progress-bar"></div>
                <div class="progress-text" id="progress-text">0%</div>
            </div>
            
            <div class="upload-status" id="upload-status"></div>
            
            <div class="upload-buttons">
                <button class="select-file-btn" id="select-file-btn">选择文件</button>
                <button class="upload-btn" id="upload-file-btn">上传文件</button>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
    <script>
        $(function() {
            // 退出登录
            $('#logout-btn').on('click', function() {
                // 清除cookie
                document.cookie = 'authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                document.cookie = 'savedUser=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                window.location.href = 'login.html';
            });
        });
    </script>
    <script>
        // 显示上传弹窗
        function showUploadDialog() {
            $('#upload-container').fadeIn();
        }

        // 关闭上传弹窗
        function closeUploadDialog() {
            $('#upload-container').fadeOut();
            resetUploadForm();
        }

        // 重置上传表单
        function resetUploadForm() {
            $('#file-input').val('');
            $('#preview-container .preview-placeholder').show();
            $('#image-preview, #video-preview').hide();
            $('#file-info').hide();
            $('#progress-container').hide();
            $('#progress-bar').width('0%');
            $('#progress-text').text('0%');
            $('#upload-status').hide().text('');
        }

        // 更新进度条
        function updateProgress(percentage) {
            $('#progress-bar').width(percentage + '%');
            $('#progress-text').text(percentage.toFixed(1) + '%');
        }

        // 显示上传状态
        function showUploadStatus(message, isError = false) {
            const $status = $('#upload-status');
            $status.text(message).show();
            $status.css('color', isError ? '#e74c3c' : '#2ecc71');
        }

        $(function() {
            // 退出登录
            $('#logout-btn').on('click', function() {
                document.cookie = 'authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                document.cookie = 'savedUser=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                window.location.href = 'login.html';
            });

            // 上传按钮事件
            $('#upload-btn, #upload-link, #floating-upload-btn, #upload-exp2, #upload-exp3, #upload-exp4').on('click', showUploadDialog);
            $('#close-upload').on('click', closeUploadDialog);

            // 文件选择按钮
            $('#select-file-btn').on('click', function() {
                $('#file-input').click();
            });

            // 文件选择变化
            $('#file-input').on('change', function(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                // 验证文件大小 (最大2GB)
                if (file.size > 2 * 1024 * 1024 * 1024) {
                    showUploadStatus('文件大小不能超过2GB', true);
                    return;
                }
                
                // 显示文件信息
                $('#file-name').text(file.name);
                $('#file-size').text(formatFileSize(file.size));
                $('#file-type').text(file.type || '未知类型');
                $('#file-info').show();
                
                // 显示预览
                const $placeholder = $('#preview-container .preview-placeholder');
                const $img = $('#image-preview');
                const $video = $('#video-preview');
                
                $placeholder.hide();
                $img.hide();
                $video.hide();
                
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $img.attr('src', e.target.result).show();
                    };
                    reader.readAsDataURL(file);
                } else if (file.type.startsWith('video/')) {
                    const url = URL.createObjectURL(file);
                    $video.attr('src', url).show();
                } else {
                    $placeholder.text(`不支持预览: ${file.name}`).show();
                }
            });

            // 上传文件
            $('#upload-file-btn').on('click', function() {
                const fileInput = $('#file-input')[0];
                if (!fileInput.files.length) {
                    showUploadStatus('请先选择文件', true);
                    return;
                }
                
                const file = fileInput.files[0];
                if (file.size > 2 * 1024 * 1024 * 1024) {
                    showUploadStatus('文件大小不能超过2GB', true);
                    return;
                }
                
                // 显示进度条
                $('#progress-container').show();
                showUploadStatus('正在上传文件...');
                
                // 创建FormData
                const formData = new FormData();
                formData.append('file', file);
                
                // 发送AJAX请求
                const xhr = new XMLHttpRequest();
                
                // 进度事件
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percent = (e.loaded / e.total) * 100;
                        updateProgress(percent);
                    }
                });
                
                // 完成事件
                xhr.addEventListener('load', function() {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            showUploadStatus('上传成功！');
                            setTimeout(closeUploadDialog, 2000);
                        } else {
                            showUploadStatus(`上传失败: ${response.message}`, true);
                        }
                    } else {
                        showUploadStatus(`上传失败: ${xhr.statusText}`, true);
                    }
                });
                
                // 错误事件
                xhr.addEventListener('error', function() {
                    showUploadStatus('上传过程中发生错误', true);
                });
                
                // 发送请求
                xhr.open('POST', '/upload', true);
                xhr.send(formData);
            });
        });

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
        }
    </script>
</body>
</html>
